<template>
  <!-- 设置 Form表单验证 绑定ref操作表单的Dom节点 设置具名插槽获取验证规则的返回提示 -->
  <Form ref='target' v-slot='{ errors }'>
    <!-- 设置Field表单验证的规则 -->
    <Field v-model="form.account" name='accountApi' :rules='schema.accountApi' class="input" type="text" placeholder="请输入用户名" />
    <!-- 判断是否存在返回的提示错误信息 如果存在 打印到页面上提示用户 -->
    <div v-if='errors.accountApi'>{{errors.accountApi}}</div>
    <!-- 整体表单验证按钮 -->
    <a href="javascript:;" class="submit" @click='handleSubmit'>进行整体验证!</a>
  </Form>
</template>

<script>
// 导入表单验证的组件
import { Form, Field } from 'vee-validate'
// 导入表单验证的规则
import schema from '@/utils/vee-validate-schema.js'
// 导入Vue3的方法
import { reactive, ref } from 'vue'
export default {
  name: 'CallbackPatch',
  // 实例化导入的表单验证的组件
  components: { Form, Field },
  setup (props) {
    // 设置ref绑定表单验证Dom节点
    const target = ref(null)
    // 设置 v-model双向绑定的输入数据 (默认为null)
    const form = reactive({
      account: null
    })

    // 整体表单验证(提交数据)
    const handleSubmit = async () => {
      // 手动进行整体表单验证(整体)
      const flag = await target.value.validate()
      // 整体表单验证通过时
      if (flag) {
        // 执行表单通过的内容
        console.log('整体表单验证通过')
      }
    }
    // 设置返回
    return { form, schema, target, handleSubmit }
  }
}
</script>
